<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>外卖平台</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/shoujisc.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/mui.css">
    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }

        .mui-control-content {
            height: 160px;
        }
        .mui-segmented-control .mui-control-item.mui-active {
            color: #fff;
            background-color: #FF6600;
        }
        .mui-segmented-control .mui-control-item {
            line-height: 38px;
            display: table-cell;
            overflow: hidden;
            width: 1%;
            -webkit-transition: background-color .1s linear;
            transition: background-color .1s linear;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #FF6600;
            border-color: #FF6600;
            border-left: 1px solid #FF6600;
        }
        .mui-segmented-control {
            font-size: 15px;
            font-weight: 400;
            position: relative;
            display: table;
            overflow: hidden;
            width: 100%;
            table-layout: fixed;
            border: 1px solid #FF8800;
            border-radius: 3px;
            background-color: transparent;
            -webkit-touch-callout: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/woxiangyao.js"></script>
    <script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
    <script type="text/javascript" src="js/foot.js"></script>
    <link rel="stylesheet" type="text/css" href="css/showTip.css">
    <script type="text/javascript" src="js/showTip.js"></script>
    <script type="text/javascript" src="js/mui.min.js"></script>

</head>
<script type="text/javascript">
    mui.plusReady(function(){
        //获得slider插件对象
        var gallery = mui('.mui-slider');
        gallery.slider({
            interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
        });
    });
</script>
<body id="wrap">

<div class="quanbu-top">
    <input id="goods_name" name="keyword" class="hd_keyword"
           placeholder="请输入商品名称" style="width: 90%;font-size: 14px" onclick="window.location.href='secList.html'">
    <a href="areaList.html" class="qb-tleft f-l">
        <!-- <img src="images/sjsc-14.png" style="width: 19px;height: 25px;"> --></a>
    <%-- <c:forEach items="${userList}" var="userList"><a href="areaList.html"><font color="#ABD13E" size="3px">&nbsp;&nbsp;${userList.area_name}</font></a></c:forEach> --%>

    <div class="qb-tright f-r">
        <a href="secList.html"> <img src="images/sjsc-13.png"> </a>
    </div>
    <div style="clear:both;"></div>
</div>
<div class="banner1" id="ban1" style="margin-bottom: 10px; ">
    <ul class="sy-ul">
        <c:forEach items="${banList}" var="list">
            <li style="border-bottom-left-radius: 10px;"><a href="${list.url} "><img src="/upload/${list.ban_img }"></a></li>
        </c:forEach>
    </ul>
    <ol class="sy-ol">
    </ol>
</div>

<%--<div class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
        <!--支持循环，需要重复图片节点-->
<c:forEach items="${banList}" var="list" varStatus="statu">
    <c:if test="${statu.last}">
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="${list.url}"><img src="/upload/${list.ban_img }" /></a></div>
    </c:if>
        <div class="mui-slider-item"><a href="${list.url}"><img src="/upload/${list.ban_img }" /></a></div>
        &lt;%&ndash;<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>&ndash;%&gt;
        <!--支持循环，需要重复图片节点-->
    <c:if test="${statu.first}">
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="${list.url}"><img src="/upload/${list.ban_img }" /></a></div>
    </c:if>
</c:forEach>

    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
    </div>
</div>--%>

<%--<div class="sy-info1" style="border-bottom:4px solid #E6E6E6;">
    <ul class="info-img">
        <li>
            <a href="secGoodsList.html?is_recommend=1" class="img-1"><img src="images/b1.png"
                                                                          style="width:42px;height: 42px"> </a>
            <a href="secGoodsList.html?is_recommend=1" class="img-txt">每周精选</a>
        </li>
        <li>
            <a href="category.html?ctg_id=23" class="img-1"> <img src="images/b2.png"
                                                                  style="width:42px;height: 42px"></a>
            <a href="category.html?ctg_id=23" class="img-txt">活力鲜果</a>
        </li>
        <li>
            <a href="category.html?ctg_id=21" class="img-1" style=""><img src="images/b3.png"
                                                                          style="width:42px;height: 42px"></a>
            <a href="category.html?ctg_id=21" class="img-txt">五谷杂粮</a>
        </li>
        <li>
            <a href="menuList.html" class="img-1"><img src="images/b4.png" style="width:42px;height: 42px"></a>
            <a href="menuList.html" class="img-txt">蔬菜会员</a>
        </li>
        <li>
            <a href="category.html?ctg_id=22" class="img-1"><img src="images/b5.png"
                                                                 style="width:42px;height: 42px"></a>
            <a href="category.html?ctg_id=22" class="img-txt">肉禽蛋类</a>
        </li>
    </ul>

</div>--%>
<div class="ssjg">
    <ul class="ssjg-ul2" style="padding-top:0;">
        <c:forEach items="${advList}" var="advList">
            <li class="li" style="border-bottom:4px solid #E6E6E6;">
                <div class="ssjg-tu">
                    <a href="${advList.url}"><img src="/upload/${advList.ban_img}" class="img2"></a>
                </div>
                <dl class="ssjg-dl1">

                    <div style="clear:both;"></div>
                </dl>
            </li>
        </c:forEach>
        <div style="clear:both;"></div>
    </ul>
</div>
<%--热门推荐--%>
<div class="ssjg">
    <ul class="ssjg-tit1">
        <li style="margin-left: 1%"><a href="JavaScript:;">热门推荐</a></li>
        <li style="text-align: right;"><a href="secGoodsList.html?is_recommend=1">更多</a></li>
        <div style="clear:both;"></div>
    </ul>
    <ul class="ssjg-ul1" style="padding-top:0;">
        <c:forEach items="${hotGoodsList}" var="goodsList">
            <li>
                <div class="ssjg-tu">
                    <a href="goodsListById.html?goods_id=${goodsList.goods_id}"><img src="/upload/${goodsList.goods_img}"></a>
                </div>
                <h3><a href="goodsListById.html?goods_id=${goodsList.goods_id}">${goodsList.goods_name}</a></h3>
                <p class="ssjg-p2" style="font-size: 11px;padding-left: 5px"><span>${goodsList.goods_spe}</span></p>
                <dl class="ssjg-dl1">
                    <dt>
                            <%-- <p class="ssjg-p2" style="font-size: 9px;"><span>${goodsList.goods_spe}</span></p> --%>
                        <p class="ssjg-p1"><span>￥${goodsList.goods_price}</span></p>
                    </dt>
                    <dd><a href="javascript:;"
                           onclick="add('${goodsList.goods_id}','${goodsList.goods_name}','${goodsList.goods_img}','${goodsList.goods_spe}','${goodsList.goods_price}')"><img
                            src="images/sjsc-09.gif" style="width: 25px;height: 25px"></a></dd>
                    <div style="clear:both;"></div>
                </dl>
            </li>
        </c:forEach>
        <div style="clear:both;"></div>
    </ul>
</div>
<%--热门推荐end--%>


<%--早中晚--%>
<div class="mui-content">
    <div style="padding: 10px 0px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <c:forEach items="${ctgList}" var="ctg" varStatus="s">
                <c:if test="${ctg.parent_id == null}">
                    <c:if test="${s.index==0}">
                        <a class="mui-control-item mui-active" href="#item${s.index}">${ctg.ctg_name}</a>
                    </c:if>
                    <c:if test="${s.index>0}">
                        <a class="mui-control-item" href="#item${s.index}">${ctg.ctg_name}</a>
                    </c:if>
                </c:if>
            </c:forEach>
        </div>
    </div>
    <div>
        <c:forEach items="${ctgList}" var="ctg" varStatus="s">
            <c:if test="${ctg.parent_id == null}">
                <c:if test="${s.index==0}">
                    <div id="item${s.index}" class="mui-control-content mui-active">
                        <c:forEach items="${ctgList}" var="cctg" varStatus="sc">
                            <c:if test="${cctg.parent_id==ctg.ctg_id}">
                                <div style="display: inline-block;width: 48.8%;background: #fff;padding: 10px;text-align:center;float: left;margin-bottom: 5px;margin: 2px;">
                                    <img src="/upload/${cctg.ctg_img}" style="height: 100px;width: 100px;margin: auto" alt="">
                                    <a href="category.html?ctg_id=${cctg.ctg_id}"> ${cctg.ctg_name}</a>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </c:if>
                <c:if test="${s.index>0}">
                    <div id="item${s.index}" class="mui-control-content">
                        <%--<div style="display: inline-block;width: 50%;background: #00B83F;float: left">男士${s.index}</div>--%>
                        <%--<div style="display: inline-block;width: 50%;background:#f00;float: left">女士${s.index}</div>--%>
                            <c:forEach items="${ctgList}" var="cctg" varStatus="sc">
                                <c:if test="${cctg.parent_id==ctg.ctg_id}">
                                    <div style="display: inline-block;width: 48.8%;text-align:center;padding: 10px;background: #fff;float: left;margin-bottom: 5px;margin: 2px;">
                                        <img src="/upload/${cctg.ctg_img}" style="height: 100px;width: 100px;;margin: auto" alt="">
                                        <a href="category.html?ctg_id=${cctg.ctg_id}"> ${cctg.ctg_name}</a>
                                    </div>
                                </c:if>
                            </c:forEach>
                    </div>
                </c:if>
            </c:if>
        </c:forEach>
        <%--<div id="item1" class="mui-control-content mui-active">--%>
            <%--<div style="display: inline-block;width: 50%;background: #00B83F;float: left">男士1</div>--%>
            <%--<div style="display: inline-block;width: 50%;background:#f00;">女士1</div>--%>
        <%--</div>--%>
        <%--<div id="item2" class="mui-control-content">--%>
            <%--<div style="display: inline-block;width: 50%;background: #00B83F;float: left">男士2</div>--%>
            <%--<div style="display: inline-block;width: 50%;background:#f00;">女士2</div>--%>
        <%--</div>--%>
        <%--<div id="item3" class="mui-control-content">--%>
            <%--<div style="display: inline-block;width: 50%;background: #00B83F;float: left">男士3</div>--%>
            <%--<div style="display: inline-block;width: 50%;background:#f00;">女士3</div>--%>
        <%--</div>--%>
    </div>


</div>
<div style="height: 120px;"></div>
<script src="js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function ($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function () {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);
</script>
<%--早中晚--%>


<%--<c:forEach items="${ctgList}" var="ctgList" varStatus="s">--%>
    <%--<div class="ssjg" style="padding-bottom:0;">--%>
        <%--<ul class="ssjg-tit1">--%>
            <%--<li style="margin-left: 1%"><a href="JavaScript:;">${ctgList.ctg_name }</a></li>--%>
            <%--<li style="text-align: right;"><a href="category.html?ctg_id=${ctgList.ctg_id}">更多</a></li>--%>
            <%--<div style="clear:both;"></div>--%>
        <%--</ul>--%>
        <%--<ul class="ssjg-ul1" style="padding-top:0;">--%>
            <%--<c:set value="goodsList${s.index}" var="gl"></c:set>--%>

            <%--<c:forEach items="${map[gl]}" var="glist" begin="0" end="5">--%>
                <%--<li>--%>
                    <%--<div class="ssjg-tu">--%>
                        <%--<a href="goodsListById.html?goods_id=${glist.goods_id}"><img src="${glist.goods_img}"></a>--%>
                    <%--</div>--%>
                    <%--<h3><a href="goodsListById.html?goods_id=${glist.goods_id}">${glist.goods_name}</a></h3>--%>
                    <%--<p class="ssjg-p2" style="font-size: 11px;padding-left: 5px"><span>${glist.goods_spe}</span></p>--%>
                    <%--<dl class="ssjg-dl1">--%>
                        <%--<dt>--%>
                                <%--&lt;%&ndash; <p class="ssjg-p2" style="font-size: 9px"><span>${glist.goods_spe}</span></p> &ndash;%&gt;--%>
                            <%--<p class="ssjg-p1" style="margin-top:10px"><span>￥${glist.goods_price}</span></p>--%>
                        <%--</dt>--%>
                        <%--<dd><a href="javascript:;"--%>
                               <%--onclick="add('${glist.goods_id}','${glist.goods_name}','${glist.goods_img}','${glist.goods_spe}','${glist.goods_price}')"><img--%>
                                <%--src="images/sjsc-09.gif" style="width: 25px;height: 25px"></a></dd>--%>
                        <%--<div style="clear:both;"></div>--%>
                    <%--</dl>--%>
                <%--</li>--%>
            <%--</c:forEach>--%>
            <%--<div style="clear:both;"></div>--%>
        <%--</ul>--%>
    <%--</div>--%>
<%--</c:forEach>--%>


<div class="sy-ft">

</div>

<!--返回顶部-->
<div class="sy-fanhui">
    <a href="JavaScript:;"><img src="images/sjsc29.gif"></a>
</div>
<script type="text/javascript">

    function add(goods_id, goods_name, goods_img, goods_spe, goods_price) {
        $.ajax({
            url: 'cartInsert.html',
            type: 'post',
            data: 'goods_id=' + goods_id + '&goods_name=' + encodeURI(goods_name) + '&goods_img=' + goods_img + '&goods_price=' + goods_price + '&goods_num=1' + '&goods_spe=' + goods_spe,
            success: function (rs) {
                var data = eval('(' + rs + ')');
                if (data.rs_code == 1) {
                    $('#cart_num').text(data.cart_num);
                    showTip("已加入购物车！");
                }
                else if (data.rs_code == 1005) {
                    showTip("登录已失效，重新登录中，请稍后...");
                    setTimeout('window.location.href=history.go(-1)', 2000);
                }
                else {
                    showTip("加入购物车失败！");
                }

            }
        })
    }

</script>
<jsp:include page="footer1.jsp"></jsp:include>
</body>
</html>
